<template>
  <div>
    <div class="main w-full lg:mt-8! md:mt-6! sm:mt-4! mt-2!">
        <div class="glass overflow-hidden">
            <div class="dashboard">
                <div class=" flex justify-center items-center divide_b">
                    <h3>近期消息</h3>
                </div>

                <el-menu
                  active-text-color="#426696"
                  class="el-menu-vertical-demo link"
                  :default-active="route.params.id"
                  text-color="#426696"
                  @open="handleOpen"
                  @close="handleClose"
                >
                  <template :key="item?._id" v-for="item in chatList">
                    <el-menu-item :index="item?._id" class=" overflow-hidden p-0! ">
                      <RouterLink 
                        :to="`/message/${item?._id}`" 
                        class="w-full pl-4! relative chatLink"
                        
                      >             
                        <div class="flex justify-start items-center " >
                          <img :src="IMG_URL_SERVER +item?.avatar?.url" :alt="item?.avatar?.name" class="avatar wh-6 mr-4!">
                          <div>{{item?.nickname}}</div>
                        </div>
                        <div class="absolute top-0 left--4 h-full flex items-center close ">
                          <div @click="delChatList(item?._id)" class="i-carbon-close wh-5 bg-black cursor-pointer"></div>
                        </div>
                      </RouterLink>
                    </el-menu-item>
                  </template>

                </el-menu>

    
        
            </div>

            <template v-if="chatList?.length !== 0">
              <div  class="games flex flex-col ">
                <div class="divide_b flex justify-center items-center bg-gray-50">{{nickname}}</div>
                <RouterView ></RouterView>
                <ChatEditor ></ChatEditor>
              </div>
            </template>
            <template v-else>
              <div  class="games flex flex-col justify-center">
                <el-empty  description="没有新的未读消息呢，快找小伙伴聊天吧。" />
              </div>
            </template>
            
        </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { fetchChatList,fetchDelChatList  } from "@/server";
import ChatEditor from "./message/components/ChatEditor.vue";
import { IMG_URL_SERVER } from "@/config"



//聊天socket
// const socket = inject<any>('socket')
//聊天列表
const chatList:any = ref([])
//router
const router = useRouter()
const route = useRoute()
//昵称
const nickname = computed(()=>{
  const chatObj = chatList.value?.find((v:any)=>{
    return v._id === route.params.id
  })
  return chatObj.nickname
})
//赋值昵称
// const  setNickname = (data:any)=>{
//   nickname.value = data
// }


//删除某一条列表
const delChatList = (id:any)=>{
  fetchDelChatList(id,()=>true).then((data)=>{
    chatList.value = data

    if(data.length !== 0 && id === route.params.id) router.push(`/message/${data[0]._id}`)
  })

}

const handleOpen = (key: string, keyPath: string[]) => {
  // console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  // console.log(key, keyPath)
}

onMounted(()=>{
  fetchChatList(()=>true).then((data)=>{
    chatList.value = data
  })
})

watchEffect(()=>{
  if(!route.params.id){
    if(chatList?.value?.length !== 0){
      router.push(`/message/${chatList.value[0]._id}`)
    
    } 
  }
},{flush:'post'})


</script>

<style scoped lang="scss">
a.router-link-exact-active {
  background:#eef0f2;
}

.chatLink{
  
  .close{
    transition: all 0.3s;
  }
  &:hover{
    .close{
      transition: all 0.3s;
      left: 0;
    }
  }
  
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

h1{
    color: #426696;
    font-weight: 600;
    font-size: 3rem;
    opacity: 0.8;
}
h2,p{
    color: #658ec6;
    opacity: 0.8;
}
h3{
    color: #426696;
    font-weight: 400;
    opacity: 0.8;

}

.main{
    font-family:Arial, Helvetica, sans-serif;
    height: calc(100vh - 14rem);
    min-height: 640px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    background-image: linear-gradient(to right top, #65dfc9,#6cbdeb);
}

.glass{
    height: 70vh;
    min-height: 600px;
    // background-color: rgba(255,255,255,0.7); 
    width: 86%;
    // background-image: linear-gradient(to right bottom, rgba(255,255,255,0.7),rgba(255,255,255,0.3));
    border-radius: 1rem;
    z-index:999;
    background-attachment: fixed;
    display: flex;
    backdrop-filter: blur(15px); 
    @media screen and (max-width:768px) {
      width: 92%;
    }
}
.dashboard{
    flex:1;
    display: flex;
    flex-direction: column;
    background-image: linear-gradient(to right bottom, rgba(255,255,255,0.7),rgba(255,255,255,0.3));
    border-radius: 1rem 0 0 1rem;
}

.games{
    flex: 2;
}

    /* background: linear-gradient(to right top,#65dfc9,#6cdbed); */
.status{
    display: flex;
    flex-direction: column;
}
.status input{
    background-image: linear-gradient(to right bottom, rgba(255,255,255,0.7),rgba(255,255,255,0.3));
    border: none;
    width: 50%;
    padding: 0.5rem;
    border-radius: 2rem;
    margin-bottom: 2rem;
}

.progress{
    background: linear-gradient(to right top, #65dfc9,#6cbdeb);
    width: 100%;
    height: 25%;
    border-radius: 1rem;
    position: relative;

}

.progress::after{
    content:"";
    width: 100%;
    height: 100%;
    background: rgb(236,236,236);
    position: absolute;
    left: 60%;
}


.percentage{
    font-weight: bold;
    background-image: linear-gradient(to right top, #65dfc9,#6cbdeb);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
</style>

<route lang="yaml">
meta:
  layout: home
</route>